module.exports = function (content) {
    // 1. style-loader 直接将 CSS 文件内容放入 style 标签中并不能解决引入静态资源的问题（静态资源的名称与打包后的不符, 需要 css-loader 帮忙解决静态资源引入的问题）
    // 2. 直接在 style-loader 处理资源前使用 css-loader 处理，css-loader 处理的结果是 js 代码，直接将 css-loader 的结果放入到 style 标签中就是将 一段 js 代放入了标签中，明显不对，我们需要得到这段代码的执行结果
    // const script = `
    //     const styleElement = document.createElement('style');
    //     styleElement.innerHTML = ${JSON.stringify(content)};
    //     document.head.appendChild(styleElement)
    // `
    // return script
}

module.exports.pitch = function (remainingRequest) {
    // pitch 函数的第一个参数 remainingRequest：剩余待执行 pitch 函数的 loader 及 待被处理的文件的绝对路径(以 ! 分割)
    //console.log(remainingRequest) //E:\Projects\stars\Webpack\06.原理\source\node_modules\css-loader\dist\cjs.js!E:\Projects\stars\Webpack\06.原理\source\src\css\index.css

    // 1. 将 remainingRequest 中绝对路径改成相对路径（内联loader的输入会被视为相对路径解析）
    const relativePath = remainingRequest.split("!").map((absolutePath) => {
        return this.utils.contextify(this.context, absolutePath)
    }).join("!")

    //console.log(relativePath) // ../../node_modules/css-loader/dist/cjs.js!./index.css

    // 2. 引入 css -loader 处理后的资源
    // 创建 style, 将内容插入页面生效
    const script = `
        import style from "!!${relativePath}"
        const styleElement = document.createElement('style');
        styleElement.innerHTML = style;
        document.head.appendChild(styleElement)
    `

    return script
} 